<template>
	<div id="clubdetails">
		<div class="head-top">
			<mt-header title="">
				<router-link to="/discover" slot="left">
					<mt-button icon="back"></mt-button>
					<mt-button slot="right">12
						<img src="../../../../static/schoolroom/club/bianji.png" alt="" />
					</mt-button>
				</router-link>
			</mt-header>
		</div>
		<div class="main">
			<div class="clubdetails">
				<p class="clubdetails-title">
					<img :src="imgUrl+listdata.userPortrait" alt="" width="50px" height="50px" />
					<span v-text="listdata.userName">今昔是何年</span>
				</p>
				<p class="clubdetails-content" v-text="listdata.describ">
					《边城》是沈从文的代表作，入选20世纪中文小说100强，排名第二位，仅次于鲁迅的《呐喊》。它以20世纪30年代川湘交界的边城小镇茶峒为背景，以兼具抒情诗和小品文的优美笔触，描绘了湘西地区特有的风土人情
				</p>
				<div class="club-nav">
					<img :src="listdata.cover" alt="" width="72px" height="95px" />
					<div class="club-nav-right">
						<p v-html="listdata.bookName">解忧杂货店</p>
						<p>作者：
							<span v-text="listdata.author">东野硅谷</span>
						</p>
						<p>简介：
							<span v-text="listdata.bookDescribe">现代人内心天天忙这个忙那个也不知道忙什么</span>
						</p>
					</div>
				</div>
				<p class="clubdetails-number">
					<span class="clubdetails-zhan">
						<div @click="addlike">
							<img src="../../../../static/schoolroom/club/zhan-zhong.png" alt="" width="25px" height="25px"  v-if="listdata.likes == 1"/>
							<img src="../../../../static/schoolroom/club/zhan.png" alt="" width="25px" height="25px"  v-else/>
						</div>
						<span v-text="listdata.likesCount">2323</span>
					</span>
					<span class="clubdetails-time">发表于
						<span v-text="listdata.createDate"></span>
					</span>
				</p>

			</div>
			<div class="clubdetails-comment" v-for="(item,index) in commentList" :key="index">
				<img :src="imgUrl+item.userPortrait" :onerror="defaultImg" alt="" width="50px" height="50px" />
				<div class="clubdetails-comment-content">
					<p>{{item.userName}}</p>
					<p>{{item.createDate}}</p>
					<p>{{item.comment}}</p>
				</div>  
			</div>
		</div>
    <div class="input_pl">
      <mt-field label="" placeholder="输入评论内容" v-model="pl_value">
        <span class="submit_b" @click="addBookPl()">发布</span>
      </mt-field>
    </div>
	</div>
</template>

<script>
import baseurl from "./../../../api/baseurl.js";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      imgUrl: "",
      listdata: {},
      defaultImg: 'this.src="' + require('../../../../static/imgs/set-logo.png') + '"',
      ids: "", 
      userid: "",
      commentList: [],
      pl_value:""
    };
  },
  created() {
    var str = localStorage.getItem("userid"); //取回userid
    this.imgUrl = baseurl.imgUrl;
    this.userid = JSON.parse(str);
    this.ids = this.$route.query.dataid;
    this.getinfo();
    this.getCommentList();
  },
  methods: {
    // 评论
    addBookPl() {
      const userid = localStorage.getItem("userid")
      if(!this.pl_value){
        Toast("评论不能为空")
        return;
      }
      const params = new URLSearchParams();
      params.append("userid", userid);
      params.append("bookfriendid", this.ids);
      params.append("comment", this.pl_value);
      this.$http({
        method: "post",
        url: baseurl.urls + "/bookfriendcircle/addBookFriendCircleComment",
        data: params
      })
        .then(response => {
          // console.log(response.data.errorCode);
          if (response.data.errorCode == 1) {
            Toast("评论成功");
            this.pl_value = "";
            this.getCommentList();
          } else {
            Toast("评论失败");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //   查询评论列表
    getCommentList() {
      this.$http({
        method: "get",
        url:baseurl.urls + "/bookfriendcircle/selectBookFriendCircleCommentDto",
        params: {
          //   userid: this.userid,
          id: this.ids,
          pageNo: 1,
          pageSize: 10
        }
      })
        .then(response => {
		  this.commentList = response.data.date.list
		  console.log(this.commentList);
        })
        .catch(error => {
          console.log(error);
        });
    },
    getinfo() {
      const userid = localStorage.getItem("userid")
      this.$http({
        method: "get",
        url: baseurl.urls + "/bookfriendcircle/selectBookFriendCircle",
        params: {
          userid: userid,
          id: this.ids
        }
      })
        .then(response => {
          if (response.status == 200) {
            this.listdata = response.data.date;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    addlike() {
      const userid = localStorage.getItem("userid")
      if (this.listdata.likes == 1) {
        this.$http({
          method: "post",
          url: baseurl.urls + "/bookfriendcircle/addbookFriendCircleLikes",
          params: {
            userid: userid,
            bookfriendid: this.listdata.id,
            likes: 0
          }
        })
          .then(response => {
            console.log(response);
            if (response.status == 200) {
              Toast("取消点赞");
              this.getinfo();
            }
          })
          .catch(error => {
            console.log(error);
          });
      }else if (this.listdata.likes == 0) {
        this.$http({
          method: "post",
          url: baseurl.urls + "/bookfriendcircle/addbookFriendCircleLikes",
          params: {
            userid: userid,
            bookfriendid: this.listdata.id,
            likes: 1
          }
        })
          .then(response => {
            console.log(response);
            if (response.status == 200) {
              Toast("点赞成功");
              this.getinfo();
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    }
  }
};
</script>

<style scoped>
#clubdetails .main {
  /*margin-top: 20px;*/
  /*padding-top: 20px;*/
  /*background-color: #FFFFFF;*/
  /*border-bottom: 0.5px solid #A9A9A9;*/
  margin-bottom: 50px;
}

.clubdetails {
  padding: 0 15px;
  background-color: #ffffff;
}

.clubdetails-title {
  display: flex;
  align-items: center;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 800;
}

.clubdetails-title > img {
  margin-right: 12px;
  border-radius: 50%;
}

.clubdetails-content {
  font: 15px/20px "microsoft yahei";
  padding-bottom: 20px;
}

.clubdetails-number {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 10px 0;
}

.clubdetails-zhan {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.clubdetails-zhan > img {
  margin-right: 8px;
}

.clubdetails-time {
  color: #868686;
}

.club-nav {
  display: flex;
  border-radius: 8px;
  align-items: center;
  padding: 9px;
  box-shadow: darkgrey 1px 1px 5px;
  margin-bottom: 10px;
}

.club-nav-right {
  margin-left: 10px;
}

.club-nav-right p:nth-of-type(1) {
  font-size: 15px;
  color: #252525;
  margin-bottom: 14px;
}

.club-nav-right p:nth-of-type(2) {
  font-size: 12px;
  color: #a1a1a1;
  margin-bottom: 11px;
}

.club-nav-right p:nth-of-type(3) {
  font-size: 12px;
  color: #a1a1a1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.clubdetails-comment {
  display: flex;
  margin-top: 2px;
  background-color: #ffffff;
  padding: 0 15px;
  padding-top: 10px;
}

.clubdetails-comment > img {
  margin-right: 14px;
  border-radius: 50%;
}

.clubdetails-comment-content {
  display: flex;
  flex-direction: column;
}

.clubdetails-comment-content p:nth-of-type(1) {
  margin-bottom: 5px;
  font-size: 15px;
}

.clubdetails-comment-content p:nth-of-type(2) {
  margin-bottom: 12px;
  font-size: 12px;
  color: #a1a1a1;
}

.clubdetails-comment-content p:nth-of-type(3) {
  margin-bottom: 12px;
  font-size: 15px;
}
.submit_b {
  background: red;
  padding: 2px 15px;
  color: #ffffff;
}
.input_pl {
  border: 1px solid #efefef;
  position: fixed;
  width: 100%;
  z-index: 99;
  bottom: 0px;
}
</style>